<template>
	<view>
		<global-contact></global-contact>
		<block v-if="detail.url">
			<web-view :src="detail.url"></web-view>
		</block>
		<block v-else>
			<view class="title">{{ detail.title }}</view>
			<view class="date" v-if="detail.author">
				<text>作者：{{ detail.author }}</text>
			</view>
			<view class="subTit">
				<text>发布日期：{{ detail.created_at }}</text>
				<text>浏览次数：{{ detail.hit }}</text>
			</view>
			<view class="mp">
				<block v-if="detail.content">
					<mp-html :content="detail.content" />
				</block>
				<block v-else>
					<view class="">
						{{ detail.description }}
					</view>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
import { detailnews } from '@/utils/request.js'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
	data() {
		return {
			detail: {
				title: '',
				created_at: '',
				hit: '',
				content: '',
				description: '',
				url: ''

			},
			detailId: ''
		}
	},
	components: {
		mpHtml
	},
	methods: {
		async detailnews(data) {
			return await detailnews(data)
		},
		getDetail(id) {
			let data = { id }
			this.detailnews(data).then(res => {
				this.detail = res.res

				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: res.res.title // 自定义标题内容
				})
			})
		}
	},
	onLoad(option) {
		if (option.scene) {
			const detailId = decodeURIComponent(option.scene);
			this.detailId = detailId.split('=')[1]
		} else {
			this.detailId = option.id
		}
		this.getDetail(this.detailId)
	},
	onShareAppMessage(res) {
		return {
			title: this.detail.title,
			path: `/pagesA/detail/news?id=${this.detailId}`,
			imageUrl: this.$config.showImgApi + this.detail.img
		}
	},
	onShareTimeline(res) {
		return {
			title: this.detail.title,
			path: `/pagesA/detail/news?id=${this.detailId}`,
			imageUrl: this.$config.showImgApi + this.detail.img
		}
	},
}
</script>

<style lang="scss">
.title {
	padding: 20rpx;
	font-size: 30rpx;
	color: #333333;
	text-align: center;
}

.date {
	text-align: center;
	font-size: 20rpx;
	color: #333333;
	margin-bottom: 10rpx;
}

.subTit {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow: row nowrap;

	text {
		font-size: 20rpx;
		color: #333333;
		margin: 0 20rpx;
	}
}

.mp {
	padding: 30rpx;
}
</style>
